<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui打印</title>
    <link rel="stylesheet" href="static/lib/layui/css/layui.css"  media="all" >
</head>
<body class="layui-bg-gray">
<div style="margin: 20px;">
    <div class="layui-card">
        <div class="layui-card-body">
            <button type="button" class="layui-btn layui-btn-normal"
                    onclick="print('test')">layui自定义打印表格</button>
            <button id="printSelect" type="button" class="layui-btn layui-btn-normal">自定义打印</button>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>

</body>

<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="static/lib/layui/layui.js"></script>
<script>
    layui.use('table', function() {
        var table = layui.table;
        table.render({
            elem: '#test',
            data: [{
                "id": "10001",
                "username": "张三",
                "email": "189461@qq.com",
                "sex": "男",
                "city": "广西南宁",
                "sign": "海内存知己，天涯若比邻",
                "experience": "116",
                "ip": "192.168.1.26",
                "logins": "666",
                "joinTime": "2022-02-22"
            }, {
                "id": "10002",
                "username": "李四",
                "email": "189461@qq.com",
                "sex": "男",
                "city": "广西贵港",
                "sign": "海内存知己，天涯若比邻",
                "experience": "12",
                "ip": "192.168.1.26",
                "logins": "106",
                "joinTime": "2022-02-22",
            }, {
                "id": "10003",
                "username": "王五",
                "email": "189461@qq.com",
                "sex": "男",
                "city": "广西玉林",
                "sign": "海内存知己，天涯若比邻",
                "experience": "65",
                "ip": "192.168.1.26",
                "logins": "106",
                "joinTime": "2022-02-22"
            }, {
                "id": "10004",
                "username": "玛卡巴卡",
                "email": "189461@qq.com",
                "sex": "女",
                "city": "广西百色",
                "sign": "海内存知己，天涯若比邻",
                "experience": "666",
                "ip": "192.168.1.26",
                "logins": "106",
                "joinTime": "2022-02-22"
            }, {
                "id": "10005",
                "username": "老五",
                "email": "189461@qq.com",
                "sex": "男",
                "city": "广西",
                "sign": "海内存知己，天涯若比邻",
                "experience": "86",
                "ip": "192.168.1.26",
                "logins": "106",
                "joinTime": "2022-02-22"
            }, {
                "id": "10006",
                "username": "老六",
                "email": "189461@qq.com",
                "sex": "男",
                "city": "广西",
                "sign": "海内存知己，天涯若比邻",
                "experience": "12",
                "ip": "192.168.1.26",
                "logins": "106",
                "joinTime": "2022-02-22"
            }, {
                "id": "10007",
                "username": "老七",
                "email": "189461@qq.com",
                "sex": "男",
                "city": "广西",
                "sign": "海内存知己，天涯若比邻",
                "experience": "16",
                "ip": "192.168.1.26",
                "logins": "106",
                "joinTime": "2022-02-22"
            }, {
                "id": "10008",
                "username": "老八",
                "email": "189461@qq.com",
                "sex": "男",
                "city": "广西",
                "sign": "海内存知己，天涯若比邻",
                "experience": "106",
                "ip": "192.168.1.26",
                "logins": "106",
                "joinTime": "2022-02-22"
            }],
            toolbar: '#toolbarDemo',
            title: '用户数据表',
            totalRow: true,
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    title: 'ID',
                    width: 150,
                    fixed: 'left',
                    unresize: true,
                    sort: true,
                    totalRowText: '合计'
                }, {
                    field: 'username',
                    title: '用户名',
                    width: 150,
                    edit: 'text'
                },{
                    field: 'ip',
                    title: '150',
                    width: 120
                }, {
                    field: 'joinTime',
                    title: '加入时间',
                    width: 150
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 150
                }]
            ],
            page: true
        });

        //工具栏事件
        table.on('toolbar(test)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                    break;
            };
        });
    });
    /*
     * layui打印表格自定义函数
     */
    function print(tablelayid) {
        var v = document.createElement("div");
        var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}",
            "table{width: 100%; border-collapse: collapse; border-spacing: 0;}",
            "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}",
            "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>"
        ].join("");
        $(v).append($(".layui-table-box").find(".layui-table-header").html());
        $(v).find("tr").after($("[lay-id=\"" + tablelayid + "\"] .layui-table-body.layui-table-main table").html());
        $(v).find("th.layui-table-patch").remove();
        $(v).find(".layui-table-col-special").remove();
        var h = window.open("打印窗口", "_blank");
        h.document.write(f + $(v).prop("outerHTML"));
        h.document.close();
        h.print();
        h.close();
    }

    /* 监听打印选中行按钮 */
    $('#printSelect').click(function() {
        layui.use(['table', 'layer'], function() {
            var table = layui.table,
                layer = layui.layer;

            var checkStatus = table.checkStatus('test')
            console.log(checkStatus)
            // 判断是否选中数据
            if (checkStatus.data.length === 0) {
                layer.msg('请选择数据', {
                    icon: 2
                })
            } else {
                printSelect(checkStatus.data)
            }
        })
    })
    /*
     * [自定义打印选中行数据]
     * @param  {[type]}  allData [传入选中行]
     */
    function printSelect(allData) {
        //用于包含内容
        var v = document.createElement("div");
        //页面头部，导入css  ，media="print"表示打印时使用该样式
        var f = ["<head>", "<style>", "div{font-size:16px;}", ".main{width:100%;height:100%}",
            ".main div{width:300px;margin-right: 50px;display:inline-block;}", "</style>", "</head>"
        ].join("");
        var contentHtml = "";
        for (let i = 0; i < allData.length; i++) {
            var data = allData[i]
            var template =

            "<div style='width:700px ;height: 700px;'>" +
            "<table width='80%' style='text-align: center'>" +
            "<tr>" +
            "<td colspan='7'>公务员平时考核周记实表<br>(第一周)<br>(那一天到那一天)" +
            "</td>" +
            "</tr>" +
            "</table>" +
            "<table width='80%' border='3' style='text-align: left;width:700px ;height: 700px;'>" +

            "<tr style='text-align: center;'>" +
                "<td colspan='1' width='15%' height='100px;'>姓名</th>" +
                "<td colspan='2' width='25%' height='100px;'>" + '张立峰峰南风按时大大说' + "</td>" +
                "<td colspan='2' width='15%' height='100px;'>科室及职务</th>" +
                "<td colspan='2' width='45%' height='100px;'>" + data.username + "</td>" +
            "</tr>" +
            "<tr style='text-align: center;'>" +
                "<td colspan='1' width='200px;' height='80px;'>项目</td>" +
                "<td colspan='4' width='200px;' height='80px;'>内容</td>" +
                "<td colspan='2' width='200px;' height='80px;'>备注</td>" +
            "</tr>" +
            "<tr>" +
                "<td colspan='1' width='300px;'  height='300px;'  style='text-align: center;'>周计划</td>" +
                "<td colspan='4'  height='300px;'>1、内容内容内容内容内。<br> 1、内容内容内容。<br> 1、内容内容内容。<br>" +
                "</td>" +
                "<td colspan='2'  height='300px;'>周计划备注AAAAAAAAAAAAAAAAAAAAAA</td>" +
            "</tr>" +
                "<tr>" +
            "<td colspan='1' width='270px;'  height='270px;'>上级通知、领导指示及其他重要事项</td>" +
            "<td colspan='4'  height='270px;'>1、内容内容内容。<br> 1、内容内容内容。<br>" +
            "</td>" +
            "<td colspan='2' height='270px;'>临时任务备注AAAAAAAAAAAAAAAAAAAAAA</td>" +
            "</tr>" +


            "<tr>" +
            "<td colspan='1' width='300px;' height='88px;'  style='text-align: center;'>本人确认签字</td>" +
            "<td colspan='6' height='88px;'  style='text-align: center;'>60分</td>" +
            "</tr>" +

            "<tr></tr>" +
            "</table>" +
            "</div>"



            contentHtml += template;
        }

        //contentHtml为已拼凑好的内容
        $(v).append(contentHtml)
        //新建窗口
        var h = window.open("打印窗口", "_blank");
        //写入拼凑内容
        h.document.write(f + $(v).prop("outerHTML"));
        //调用打印
        h.print();
        //关闭页面
        h.close();
    }
</script>
</html>

